<template>
  <div>
    <div class="body">
      <el-table :data="tableData" class="table" border>
        <el-table-column prop="shop_name" label="店铺名称" align="center">
        </el-table-column>
        <el-table-column prop="price" label="产品单价" align="center">
        </el-table-column>
        <el-table-column prop="sale" label="月销量" align="center">
        </el-table-column>
        <el-table-column prop="operate" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-plus"
              size="small"
              type="success"
              @click="showDetail(scope.row)"
              >订餐
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="订餐表单" :visible.sync="dialog" class="dialog">
        <div>
          <el-form ref="form" :model="form">
            <el-form-item label="店铺名称：">
              <span>{{ form.shop_name }}</span>
              <!-- <el-input v-model="form.shop_name"></el-input> -->
            </el-form-item>

            <el-form-item label="产品单价：">
              <span>{{ form.order_money }}</span>
              <!-- <el-input v-model="form.order_money"></el-input> -->
            </el-form-item>

            <el-form-item label="订餐方式：">
              <el-select v-model="form.order_way" placeholder="请选择订餐方式">
                <el-option label="人工订餐" value="人工订餐"></el-option>
                <el-option label="网上订餐" value="网上订餐"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="客户姓名：">
              <el-input v-model="detail.user_name" disabled></el-input>
            </el-form-item>

            <el-form-item label="送餐地址：">
              <el-input v-model="form.cons_addre"></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button type="primary" @click="add"> 提交 </el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getdata();
  },
  data() {
    return {
      tableData: [],
      dialog: false,
      form: {
        shop_name: "",
        order_money: "",
        order_way: "",
        cons_name: "",
        cons_addre: "",
      },
      detail: {},
    };
  },
  methods: {
    getdata() {
      this.$axios.get("/api/user/shop").then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          this.tableData = res.data.tabledata;
        }
      });
      this.$axios.get("/api/user/usermsg").then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          this.detail.age = res.data.data.age;
          this.detail.mail = res.data.data.mail;
          this.detail.phone = res.data.data.phone;
          this.detail.real_name = res.data.data.real_name;
          this.detail.sex = res.data.data.sex;
          this.detail.user_name = res.data.data.user_name;
        }
      });
    },
    showDetail(row) {
      this.form.shop_name = row.shop_name;
      this.form.order_money = row.price;
      this.form.cons_name = this.detail.user_name;
      this.dialog = true;
    },
    add() {
      this.$axios.post("/api/user/addorder", this.form).then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          this.$message({
            message: "成功下单",
            type: "success",
          });
          this.dialog = false;
          this.getdata();
        }
      });
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 10%;
  text-align: center;
  line-height: 64px;
  font-size: 20px;
  font-weight: 800;
  border-bottom: 1px solid #e3e3e3;
}
</style>
